/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
html{color:#000;background:#fff;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}

/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {margin:0;padding:0;}

/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block;}


/* 要注意表单元素并不继承父级 font 的问题 */
body,button,input,select,textarea{font-family: punctuation,\5FAE\8F6F\96C5\9ED1;}
input,select,textarea{font-size:100%;}

/* IE bug fixed: th 不继承 text-align*/
th{text-align:inherit;}
fieldset,img{border:0;}

/* ie6 7 8(q) bug 显示为行内表现 */
iframe{display:block;}

/* 去掉 firefox 下此元素的边框 */
abbr,acronym{border:0;font-variant:normal;}
a{text-decoration: none;}
a:focus{outline:none;}

/* 一致的 del 样式 */
del {text-decoration:line-through;}

address,caption,cite,code,dfn,em,th,var {font-style:normal;font-weight:500;}

/* 去掉列表前的标识, li 会继承 */
ol,ul {list-style:none;}

/* 对齐是排版最重要的因素, 别让什么都居中 */
caption,th {text-align:left;}

/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:500;
}

/* 清理浮动 */
.fn-clear:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;
}
.fn-clear {zoom:1; /* for IE6 IE7 */}
.section { text-align: center; overflow: hidden;}
/*
.section2 p { position: relative; left: -120%;}
.section3 p { position: relative; bottom: -120%;}
.section4 p { display: none;}*/
img{border:none;}

.section1 {
    background:url(../img/bg_1.jpg) no-repeat center center #010715; background-size: cover;
    text-align:center;
    position: relative;
}
.section2 {
    background:url(../img/bg_2.jpg) no-repeat center center #010715; background-size: cover;
    text-align:center;
    position: relative;
}
.section5 {
    background:url(../img/bg_5.jpg) no-repeat center center #010715; background-size: cover;
    text-align:center;
    position: relative;
}
.overview {
    background:#fff

}
.configuration {
    background:hsl(158,58%,52%);
}
.options {
    background:hsl(28,100%,52%);
}
.methods {
    background:hsl(200,60%,55%);
}
.inner {
    width:960px;
    margin:0 auto;
}
pre {
    background:rgba(0,0,0,0.2);
    padding:2em 0 2em 0;
    font-size:2.1em;
    margin-top:0.7em;
}
@-webkit-keyframes arrow {
    0%,100% {
        top:50px;
    }
    50% {
        top:80px;
    }
}
@keyframes arrow {
    0%,100% {
        top:50px;
    }
    50% {
        top:80px;
    }
}
@media (max-width:960px) {
    .inner {
        width:100%;

    }
    h1,h2,h3,p,pre,dl {
        margin-left:30px;
        margin-right:30px;
    }
}
.section{overflow: hidden; min-width: 1000px;}
.section1 img{ display: block; width: 100%;}
.section1 .logo{position: absolute; top:30px; left: 70px; width:8%;}
.section1 .down{position: absolute; bottom:10px; left: 50%; width: 109px; height: 24px; margin:0 0 0 -55px; opacity: 0;}
.section1 .tit_1{width: 34%; display: block; margin:200px auto 0; *margin-top:50px;}
.section1 .tit_11{width: 28%; display: block; margin:15px auto 20px;}
.section1 a.btn{margin: 50px auto 220px; width: 15%; display: block; transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s; -o-transition: all .2s;}
.section1 a:hover.btn{-webkit-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);}
.section1 a:active.btn{-webkit-transform: scale(.9);-ms-transform: scale(.9);-o-transform: scale(.9);transform: scale(.9);}
.section1 .tit_1,.section1 .tit_11,.section1 .btn_1{ opacity:0; position: relative; top:50px;}
.section1 .dtCent{ width: 46%; background:rgba(255,255,255,0.3); margin:30px auto 12px; overflow: hidden; opacity:0;
}
.section1 .dtCent .h1{font-size: 22px; font-family:"Microsoft YaHei"; color: #444444; text-align: center; padding: 35px 0 25px 60px; width: 205px; margin: 0 auto; background:url(../img/n0.gif) no-repeat left 18px; background-size:65px;}
.section1 .dtCent .btnBox{width: 560px; margin: 0 auto 30px; overflow: hidden; height: 46px;}
.section1 .dtCent .btnBox .btnBl{float: left; width:260px; display: inline; margin:0 15px 0 0;}
.section1 .dtCent .btnBox .btnBr{float: left; width:260px; display: inline; margin:0 0 0 15px;}
.section1 .dtCent .btL1{float: right; background: #0096e8; font-size: 18px; color: #fff; padding:7px 20px; text-align: center; border-radius: 5px;}
.section1 .dtCent .btR1{float: left; background: #8bc900; font-size: 18px; color: #fff; padding:7px 20px; text-align: center; border-radius: 5px;}
.section1 .gong{color:#7c846f; }
@media screen and (min-width: 1440px){
.section1 .tit_1{
margin:280px auto 0px;
}
.section1 .dtCent{
margin:50px auto 15px;
padding:30px 0;
}
.section1 .dtCent .btnBox{width: 560px; margin: 0 auto 30px; overflow: hidden; height: 46px;}
.section1 .dtCent .btL1{float: right; background: #0096e8; font-size: 20px; color: #fff; padding:9px 50px; text-align: center; border-radius: 5px;}
.section1 .dtCent .btR1{float: left; background: #8bc900; font-size: 20px; color: #fff; padding:9px 50px; text-align: center; border-radius: 5px;}
.section1 .gong{color:#7c846f; font-size: 16px;}
}


.msgOn{-webkit-animation: heyopenpls 2s ease infinite;-moz-animation: heyopenpls 2s ease infinite;-mos-animation: heyopenpls 2s ease infinite;-o-animation: heyopenpls 2s ease infinite; animation: heyopenpls 2s ease infinite;}
@-webkit-keyframes heyopenpls{
  0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); }

    40%{ -webkit-transform: translateY(-1.0rem); }

    60%{ -webkit-transform: translateY(-.45rem); }
}

@-moz-keyframes heyopenpls{
  0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); }

    40%{ -moz-transform: translateY(-1.0rem); }

    60%{ -moz-transform: translateY(-.45rem); }
}

@-o-keyframes heyopenpls{
  0%, 20%, 50%, 80%, 100% { -o-transform: translateY(0); }

    40%{ -o-transform: translateY(-1.0rem); }

    60%{ -o-transform: translateY(-.45rem); }
}

@keyframes heyopenpls{
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }

    40%{ transform: translateY(-1.0rem); }

    60%{ transform: translateY(-.45rem); }
}


.section2 .tit_2{display: block; width: 16%; margin:20px auto;}
.section2 .tit_22{display: block; width: 37%; margin:45px auto 20px;}
.section2 .tit_23{display: block; width: 37%; margin:20px auto 45px;}
.section2 .pic_2{display: block; width: 33%; margin:20px auto 40px;}
.section2 img{width: 100%; opacity: 0;}  
.section2 .down{position: absolute; bottom:10px; left: 50%; width: 109px; height: 24px; margin:0 0 0 -55px;}
.section2 .down img{ opacity: 1;}


.warp{width: 1000px; margin: 0 auto 20px;}
.section3 .tit_3{margin: 0 auto 20px; display: block; width: 30%;}
.section3 .lfcenten{width: 734px; height:641px; padding:70px 0 0; margin: 0 auto; background: url(../img/pic_36.jpg) no-repeat;}
.section3 .lfBox{width: 468px; height:478px; margin: 0 auto;  position: relative;}
.section3 .lfBox  li{position: absolute; opacity:0;}
.section3 .lfBox .pic31{top:-100px; left:-100px;}
.section3 .lfBox .pic32{top:-200px; left:473px;}
.section3 .lfBox .pic33{top:533px; left:573px;}
.section3 .lfBox .pic34{top:633px; left:-300px;}
.section3 .lfBox .tit32{opacity:1; left:50%; top:-50px; margin:0 0 0 -72px;}
.section3 .rtBox {float:left; display: inline; margin: 0 0 0 20px;}
.section3 .rtBox img{-webkit-transform: scale(0.1);-moz-transform: scale(0.1);transform: scale(0.1);}
.section3 .down{position: absolute; bottom:10px; left: 50%; width: 109px; height: 24px; margin:0 0 0 -55px;}

.section4{position: relative; background:url(../img/pic_4bg.jpg) repeat;}
.section4 .mb{display:none;}
.tsf{-webkit-animation: heyopenpls 800ms linear; -moz-animation: heyopenpls 800ms linear; animation: heyopenpls 800ms linear; -webkit-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards; animation-fill-mode: forwards;}

@-webkit-keyframes heyopenpls{
    0% { -webkit-transform: scale(0.2); opacity:0; }

    40%{ -webkit-transform: scale(1.1); opacity:1; }

    70%{ -webkit-transform: scale(0.9); }

    100% { -webkit-transform: scale(1);}
}

@-moz-keyframes heyopenpls{
    0% { -moz-transform: scale(0.2); opacity:0;}

    40%{ -moz-transform: scale(1.1); opacity:1;  }

    70% { -moz-transform: scale(0.9); }

    100%{ -moz-transform: scale(1); }
}


@keyframes heyopenpls{
    0% {transform: scale(0.2); opacity:0;}

    40%{transform: scale(1.1); opacity:1;}

    70% {transform: scale(0.9); }

    100%{transform: scale(1); }
}
.section4 .down{position: absolute; bottom:10px; left: 50%; width: 109px; height: 24px; margin:0 0 0 -55px; opacity: 0;}

.section5 .bottomC{position: absolute; left: 0; bottom:0; width: 100%; height: 30%; background: rgba(64,16,0,.7); overflow: hidden; display: none; *height:200px;}
.section5 .bottomC p{font-size: 20px; color: #fff; font-family:"Microsoft YaHei"; line-height: 34px;}
.section5 .bottomC .mgTop{margin-top:30px;}
.section5 .bottomC .csBtn{font-size: 20px; color: #fff; font-family:"Microsoft YaHei"; padding: 7px 0; margin: 20px auto 0; width: 14%; background: #da5106; border-radius:5px; display: block;}

.section5 a.btn{margin: 30px auto 30px; width: 15%; display: block; transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s; -o-transition: all .2s;}
.section5 a.btn img{display: block; width: 100%;}
.section5 a:hover.btn{-webkit-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);}
.section5 a:active.btn{-webkit-transform: scale(.9);-ms-transform: scale(.9);-o-transform: scale(.9);transform: scale(.9);}

.section5 .foot{position: absolute; bottom:0; width: 100%; height: 30px; text-align: center; font-size: 10px; color: #fff; opacity: .7; filter: alpha(opacity=70); font-weight: normal;}